<template>
  <a-modal 
    :visible="visible"
    :width="1000"
    :title="title"
    :destroyOnClose="true"
    :maskClosable="false"
    footer=""
    @cancel="closeModal()" 
    :keyboard="false">
    <a-form :label-col="{ span: 6 }" 
      :wrapper-col="{ span: 14 }">
      <a-form-item label="产品分类">
        <div v-for="(item,index) in formData.caseClassificationNameList" :key="index">
          {{item}}
        </div>
      </a-form-item>
      <a-form-item label="产品名称">
        {{formData.caseProductName}}
      </a-form-item>
      <a-form-item label="产品主图片">
          <a-space class="main_picture" >
              <img :src="formData.largeScreenPicture"/>
              <img :src="formData.appPicture"/>
              <img :src="formData.appletPicture"/>
          </a-space>
          <div>
            <a-space class="upload_detail">
              <template v-for="(item,index) in formData.caseProductPictures">
                <img :src="item" :key="index"/>
              </template>
            </a-space>
          </div>
      </a-form-item>
      <a-form-item label="产品规格" v-if="formData.caseProductInfoList && formData.caseProductInfoList.length>0">
        <table class="product_spec table">
          <tr v-for="(item,index) in formData.caseProductInfoList" :key="index">
            <th>{{item.infoName}}</th>
            <td>{{item.infoValue}}</td>
          </tr>
        </table>
      </a-form-item>
      <a-form-item label="产品简介" v-if="formData.caseProductDescribe">
        <div v-html="formData.caseProductDescribe"></div>
      </a-form-item>
      <a-form-item label="排序">
        {{formData.sort}}
      </a-form-item>
      <a-form-item label="是否显示">
        <a-radio-group disabled :options="statusList"
          v-model="formData.enableShow"></a-radio-group>
      </a-form-item>
      <a-form-item label="展示平台">
        <a-checkbox-group disabled
          :options="platformList"
          v-model="formData.exhibitionPlatform">
        </a-checkbox-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import deepCopy from '@/utils/deepCopy'
import {showPlatformList,showStatusList,showSpecList} from '@/utils/dictData';
import ImageUploadList from '@/components/form/UploadImage';

export default {
  components:{
    ImageUploadList
  },
  props: {
    record: {
      type: Object,
      default() {
        return {}
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    title () {
      return '产品详情'
    },    
  },
  data () {
    return {
      //状态列表
      statusList:showStatusList,
      //平台列表
      platformList:showPlatformList,
      //格式化图库属性集合
      formatQuotedPriceList:[],
      formatQuotedPriceNameList:[],//
      formData:{},
    }
  },
  watch: {
    visible(newVal){
      if(newVal){
        this.resetData();
        this.getDetail();
      }
    }
  },
  created(){
    this.formatQuotedPriceNameListData();
    this.formatQuotedPriceListData();
  },
  methods: {
    resetData(){
      this.formData={};
    },
    async getDetail(){
      let id=this.record.id;
      if(!id){
        return;
      }
      let res=await this.$get('/cases/product/query',{id});
      if(res && res.returnCode==1000){
        let tmpObj=res.dataInfo;
        console.log('typeof this.formData.exhibitionPlatform',typeof tmpObj.exhibitionPlatform)
        if(tmpObj.exhibitionPlatform && typeof tmpObj.exhibitionPlatform==='string'){
          tmpObj.exhibitionPlatform=tmpObj.exhibitionPlatform.split(',').map(item=>{
            return parseInt(item)
          });
        }        
        if(tmpObj.caseProductPictures){
          tmpObj.caseProductPictures=tmpObj.caseProductPictures.split(',')
        }
        this.formData=tmpObj;
      }
    },
    closeModal (freshTable) {
      this.resetData();
      this.$emit('cancel', freshTable)
    },
    //格式化产品属性名称
    formatQuotedPriceNameListData(){
      let tmpData=[];
      let prevItem={};
      if(this.formData.caseQuotedPriceList){
        this.formData.caseQuotedPriceList.forEach(item=>{
          let itemData={
            label:item.quotedPriceName,
            value:item.quotedPriceId
          };
          if(itemData.value != prevItem.value){
            tmpData.push(itemData)
            prevItem=itemData;
          }
        })
      }
      this.formatQuotedPriceNameList=tmpData;
    },
    //格式化产品属性
    formatQuotedPriceListData(){   
      let arr=this.formData.caseQuotedPriceList||[];
      var map = {}
      var dest = []
      for (var i = 0; i < arr.length; i++) {
        var ai = arr[i]
        if (!map[ai.quotedPriceId]) {
          dest.push({
            id: ai.quotedPriceId,
            options: [ai]
          })
          map[ai.quotedPriceId] = ai
        } else {
          for (var j = 0; j < dest.length; j++) {
            var dj = dest[j]
            if (dj.id === ai.quotedPriceId) {
              dj.options.push(ai)
              break
            }
          }
        }
      }
      this.formatQuotedPriceList=dest;
    },
    //上传详情图片
    handleDetailChange(urls) {
      let params=deepCopy(this.formData);
      params['galleryProductPictures']=urls;
      params['galleryClassificationIdList']=this.formData.galleryClassificationList.map(item=>{
        let arr = item.split(',');
        if(arr.length>0){
          arr.splice(0,1);
        }
        return arr.join(',');
      })
      params['exhibitionPlatform']=this.formData.exhibitionPlatform.join(',');
      if(this.updateData(params)){
        this.$message.success('删除成功')
      }
      else {
        this.$message.error('删除失败')
      }
    },
    async updateData(params){
      let res=await this.$post('/cases/product/update',params)
      if(res && res.returnCode=='1000'){
        return true;
      }
      return false;
    }
  }
}
</script>

<style lang="less" scoped>
  .main_picture{
    img{
      display:block;
      width:120px;
      height:120px;
      object-fit: cover;
      border:1px solid #eee;
      box-sizing: border-box;
    }
  }
  .upload_detail{
    flex-wrap: wrap;
    img{
      width:120px;
      height:120px;
      object-fit: cover;
      border:1px solid #eee;
      box-sizing: border-box;
      margin-right:5px;
      margin-top:10px;
    }
  }
  .table{
    border: 1px solid #E6E6E6;
    width: 100%;
    th,td{        
      border: 1px solid #E6E6E6;
      padding:0 10px;
      white-space: nowrap;
    }
    th{
      font-weight: normal;
      width:120px;
    }
    td{
      
    }
  }
  .quotationAttr{
    table-layout:fixed;
    margin-bottom: 10px;
    text-align: center;    
    .ant-select-open .ant-select-selection{
      box-shadow: none;
    }
    td:nth-child(1){
      width:100px;
    }
    td:nth-child(2){
      width:60px;
    }
    td:nth-child(3){
      width:80px;
    }
    td:nth-child(4){
      width:100px;
    }
    td:nth-child(5){
      width:140px;
    }
  }
</style>
